<template>
  <div class="acount-setting">
    <div class="title">
      <div class="block"></div>
      <div class="word">账户设置</div>
      <div class="button">
        <el-button class="el-button" @click="refresh">刷新</el-button>
      </div>
    </div>
    <div class="setting-content-title">账户设置</div>

    <div class="acount-setting-content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="头像:" prop="avatar">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :http-request="selectPicUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="用户名:" prop="username">
          <el-input v-model="ruleForm.username" disabled></el-input>
        </el-form-item>

        <el-form-item label="昵称:" prop="nickname">
          <el-input v-model="ruleForm.nickname"></el-input>
        </el-form-item>

        <el-form-item label="手机号:" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>

        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>

        <el-form-item label="旧密码:" prop="oldPassword">
          <el-input type="password" v-model="ruleForm.oldPassword"></el-input>
        </el-form-item>

        <el-form-item label="新密码:" prop="newPassword">
          <el-input type="password" v-model="ruleForm.newPassword"></el-input>
        </el-form-item>

        <el-form-item label="确认密码:" prop="finalPassword">
          <el-input type="password" v-model="ruleForm.finalPassword"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="submit" type="primary" @click="submitForm"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getUserInfo, EditUser, updateUserInfoPhoto } from "../../../api";
import qs from "qs";

export default {
  inject: ["reload"],
  name: "indexAcountSetting",
  components: {},
  data() {
    return {
      progressFlag: false,
      progressPercent: 0,
      formData: new FormData(),
      imageUrl: "",
      avatar: "avatar",
      ruleForm: {
        username: "",
        nickname: "",
        phone: "",
        oldPassword: "",
        newPassword: "",
        finalPassword: "",
        email: "",
      },
      rules: {
        avatar: [
          { required: true, message: "请输入上传logo", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        nickname: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度为11个字符", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
        oldPassword: [
          { required: true, message: "请输入旧的密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        finalPassword: [
          { required: true, message: "两个密码应该一致", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "两个密码应该一致",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {
    this.$emit("routeName", "indexAcountSetting");
    getUserInfo(window.sessionStorage.getItem("userId")).then((res) => {
      const data = res.data;
      console.log(data);
      this.ruleForm.username = data.username;
      this.ruleForm.nickname = data.nickname;
      this.ruleForm.phone = data.phone;
      this.ruleForm.email = data.email;
      this.ruleForm.oldPassword = data.password;
      this.imageUrl = data.avatar;
      // this.ruleForm.newPassword2 = data.password;
      // this.ruleForm.confirmPassword2 = data.password;
    });
  },

  methods: {
    selectPicUpload(file) {
      this.imageUrl = URL.createObjectURL(file.file);
      this.formData.append("avatar", file.file);
    },
    submitForm() {
      let data = qs.stringify({
        aaa: "",
        username: this.ruleForm.username,
        nickname: this.ruleForm.nickname,
        phone: this.ruleForm.phone,
        email: this.ruleForm.email,
        bbb: "",
      });
      EditUser(window.sessionStorage.getItem("userId"), data).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.$message({
            message: "更新用户信息成功",
            type: "success",
          });
        } else {
          this.$message.error("更新用户信息失败");
        }
      });

      updateUserInfoPhoto(
        window.sessionStorage.getItem("userId"),
        this.formData
      ).then((res) => {
        console.log(res);
      });
    },
    refresh() {
      this.reload();
    },
  },
};
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 10px;
}

.acount-setting-content {
  background-color: #fff;
  border: 1px solid #e4e4e4;
}

.setting-content-title {
  font-size: 14px;
  margin-top: 20px;
  padding-left: 20px;
  border: 1px solid #e4e4e4;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-form {
  margin-top: 50px;
  width: 400px;
  margin-left: 50%;
  transform: translate(-70%);
  margin-bottom: 150px;
}

.submit {
  margin-left: 50%;
  transform: translateX(-60%);
  margin-top: 30px;
  background-color: #1abc9c;
  border: 1px solid #1abc9c;
  width: 100px;
}
</style>
